<!doctype html>
<html lang="en" dir="ltr" xmlns:th="http://www.thymeleaf.org">
<head th:replace="public/head :: head(专栏)"></head>
<body class="">
<div class="page">
    <div class="flex-fill">
        <div th:replace="public/menu :: menu(2)"></div>
        <div class="my-3 my-md-5">
            <div class="container">
                <div class="row">
                    <div class="col-md-3">
                        <h3 class="mb-4"><p class="lh-1">专栏</p></h3>
                        <div>
                            <div class="list-group list-group-transparent mb-0">
                                <a href="#" class="list-group-item list-group-item-action d-flex align-items-center active" th:href="@{/admin/column/list}">
                                    <span class="icon mr-3"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12"></polyline><path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"></path></svg>
                                    </span>所有专栏
                                </a>
                                <a href="#" class="list-group-item list-group-item-action d-flex align-items-center" th:href="@{/admin/column}">
                                    <span class="icon mr-3"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
                                    </span>新增专栏
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-9">
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">已发布</h3>
                            </div>
                            <div class="card-body" th:each="column : ${page.list}">
                                <div class="row row-sm align-items-center">
                                    <div class="col-auto">
                                        <span class="avatar avatar-lg" th:style="'background-image: url(' +  ${column.image} + ')'"></span>
                                    </div>
                                    <div class="col">
                                        <h4 class="card-title m-0">
                                            <a href="#" th:href="@{'/admin/column/'  + ${column.id}}" th:text="${column.name}">专栏名：Redis</a>
                                        </h4>
                                        <div class="text-muted" th:text="${column.summary}">
                                            Working in Kare
                                        </div>
                                    </div>
                                    <div class="col-auto">
                                        <a href="#" class="btn btn-sm btn-secondary d-none d-md-inline-block" onclick="addArticle(this)" th:attr="columnId=${column.id},columnName=${column.name}">
                                            添加文章
                                        </a>
                                        <a href="#" class="btn btn-sm btn-secondary d-none d-md-inline-block" th:id="'addBanner' + ${column.id}"
                                           onclick="addToBanner(this, true)"
                                           th:attr="columnId=${column.id}"
                                                    th:style="${column.banner} ? 'display:none !important;' : ''">
                                            添加到轮播图
                                        </a>
                                        <a href="#" class="btn btn-sm btn-secondary d-none d-md-inline-block text-red" th:id="'cancelBanner' + ${column.id}"
                                                    onclick="addToBanner(this, false)"
                                                    th:attr="columnId=${column.id}"
                                                    th:style="${column.banner} ? '' : 'display:none !important ;'">
                                            从轮播图移除
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div class="card-body" th:if="${page.totalPage > 0}">
                                <span>
                                    共<b class="text-red">&nbsp;[[${page.totalNum}]]&nbsp;</b>
                                    个专栏，共<b class="text-red">&nbsp;[[${page.totalPage}]]&nbsp;</b>
                                    页，当前第<b class="text-red">&nbsp;[[${page.page}]]&nbsp;</b>页</span>
                                <ul class="pagination center float-right">
                                    <li class="page-item" th:classappend="${page.totalPage == 0 || page.page == 1} ? 'disabled' : ''">
                                        <a class="page-link" href="#" tabindex="-1" th:href="'/admin/column/list?page=' + ${page.page - 1}">
                                            <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                                <path stroke="none" d="M0 0h24v24H0z"></path>
                                                <polyline points="15 6 9 12 15 18"></polyline>
                                            </svg>
                                        </a>
                                    </li>
                                    <li class="page-item" th:classappend="${page.totalPage == 0 || page.page == page.totalPage} ? 'disabled' : ''">
                                        <a class="page-link" href="#" th:href="'/admin/column/list?page=' + ${page.page + 1}">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                 viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                                 stroke-linecap="round" stroke-linejoin="round" class="icon">
                                                <polyline points="9 18 15 12 9 6"></polyline>
                                            </svg>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal modal-blur fade" id="modal-report" tabindex="-1" role="dialog" aria-hidden="true"></div>
    <div th:replace="admin/dashboard :: footer"></div>
</div>
<script>
    let currentColumnId = "";
    let currentColumnName = "";
    function addArticle(ele) {
        currentColumnId = $(ele).attr("columnId");
        currentColumnName = $(ele).attr("columnName");
        $.ajax({
            type: "get",
            url: "/admin/column/item/list",
            data: {"columnId": currentColumnId},
            success: function (data) {
                console.log(data);
                $("#modal-report").html(data);
                $("#modal-report").modal('show');
                currentColumnId = "";
                currentColumnName = "";
            },
            error: function (data) {
                currentColumnId = "";
                currentColumnName = "";
            }
        })
    }

    function addToBanner(ele, flag) {
        currentColumnId = $(ele).attr("columnId");
        $.ajax({
            type: "post",
            url: "/admin/column/banner",
            data: {"columnId": currentColumnId, "banner": flag},
            success: function (data) {
                console.log(data);
                if (data.code == 200) {
                    window.location.reload();
                }
            },
            error: function (data) {
                currentColumnId = "";
            }
        })
    }
</script>
</body>
</html>